<template>
    <div>
        <h2 style="text-align: center;">用户详细信息注册</h2>
        <table class="table-bordered" border="1">
            <tr>
                <td>真实姓名:</td>
                <td>
                    <input type="text" placeholder="请输入真实姓名" v-model="UserInfo.U_Name" />
                </td>
            </tr>

            <tr>
                <td>身份证号:</td>
                <td>
                    <input type="text" placeholder="请输入身份证号" v-model="UserInfo.U_IdCard" @change="GetDate" />
                </td>
            </tr>

            <tr>
                <td>用户类型:</td>
                <td>
                    <select v-model="UserInfo.UT_Id">
                        <option value="0">--请选择--</option>
                        <option v-for="item in info" :value="item.UT_Id">{{ item.UT_Name }}</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>联系方式:</td>
                <td>
                    <input type="text" placeholder="请输入联系方式" v-model="UserInfo.U_Phone" />
                </td>
            </tr>

            <tr>
                <td>出生日期:</td>
                <td>
                    <input type="date" v-model="UserInfo.U_Date" />
                </td>
            </tr>

            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="StuSex" v-model="UserInfo.U_Sex" value="true" checked>男
                    <input type="radio" name="StuSex" v-model="UserInfo.U_Sex" value="false">女
                </td>
            </tr>

            <tr>
                <td>年收入:</td>
                <td>
                    <input type="text" placeholder="请输入年收入" v-model="UserInfo.U_InCome" />
                </td>
            </tr>

            <tr>
                <td colspan="2" style="text-align: center;">
                    <input type="button" value="注册" class="btn btn-success" @click="SaveData">
                    <input type="button" value="返回" class="btn btn-link">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
    import { useRoute } from 'vue-router';
    import { onMounted,ref } from 'vue';
    import axios from 'axios';

    const route=useRoute();

    //创建响应式数据
    const info=ref([{
        UT_Id:0,
        UT_Name:""
    }])

    //创建响应式数据，完成控件的双向绑定操作
    const UserInfo=ref({
        U_Id:0,
        U_Name:"",
        U_Sex:true,
        U_Phone:"",
        U_Date:"",
        U_IdCard:"",
        U_InCome:"",
        UT_Id:0
    })

    //创建生命周期函数钩
    onMounted(()=>{
        LoadUserType();
    })

    //完成用户类型信息加载
    const LoadUserType=()=>{
        axios.get("https://localhost:44321/api/Users/ShowUserType")
        .then(res=>{
            info.value=res.data
        })
    }

    //根据身份证号码完成出生日期加载
    const GetDate=()=>{
        //142625199908140897
        var Ubir=UserInfo.value.U_IdCard.substring(6,14);

        //获取年
        var Uyear=Ubir.substring(0,4);
        //获取月
        var Umonth=Ubir.substring(4,6);
        //获取日
        var Uday=Ubir.substring(6,8);

        UserInfo.value.U_Date=Uyear+"-"+Umonth+"-"+Uday;
    }

    //完成用户详细信息注册
    const SaveData=()=>{
        //判断真实姓名,身份证号码不能为空
        if(UserInfo.value.U_Name=="")
        {
            alert('真实姓名不能为空');
            return;
        }
        if(UserInfo.value.U_IdCard=="")
        {
            alert('身份证号码不能为空');
            return;
        }
        //验证身份证号是否符合要求
        var reg=/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if(!reg.test(UserInfo.value.U_IdCard))
        {
            alert('身份证号格式不符合要求');
            return;
        }
        //验证联系方式是否符合要求
        reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if(!reg.test(UserInfo.value.U_Phone))
        {
            alert('联系方式格式不符合要求');
            return;
        }
        //验证年收入
        if(Number(UserInfo.value.U_InCome)<0||Number(UserInfo.value.U_InCome)>1000000)
        {
            alert('年收入不能小于0且小于100万');
            return;
        }

        axios.post("https://localhost:44321/api/Users/AddUserInfo",
            {
                U_Id:route.params.Uid,
                U_Name:UserInfo.value.U_Name,
                U_Sex:UserInfo.value.U_Sex,
                U_Phone:UserInfo.value.U_Phone,
                U_Date:UserInfo.value.U_Date,
                U_IdCard:UserInfo.value.U_IdCard,
                U_InCome:UserInfo.value.U_InCome,
                UT_Id:UserInfo.value.UT_Id
            }
        )
        .then(res=>{
            if(res.data>0)
            {
                alert('用户详细信息完善成功');
            }
            else
            {
                alert('用户详细信息完善失败');
            }
        })
        .catch(error=>{
            console.log(error)
        })
    }

</script>